<template>
    <div class="wrapper">
        <div class="scan" @click="showGroupCityPush">
            <text class="ic iconfont">&#xe615;</text>
            <text class="txt">{{location}}</text>
        </div>
        <text class="search iconfont"  @click.stop="buyCar">&#xe65c; {{currentWord || "搜索服务，拉近我们的距离"}}</text>
        <div class="notice" @click.stop="">
            <text class="ic iconfont"></text>
            <text class="txt"></text>
        </div>

        <!-- push方式演示 -->
        <wxc-city ref="wxcCityPush" :style="{'margin-top': cityTop + 20}"
              :inputConfig="inputConfig"
              :animationType="animationTypePush"
              :currentLocation="location"
              :cityStyleType="cityStyleType"
              :sourceData="sourceData"
              :showNavHeader="true"
              @wxcCityItemSelected="citySelect"
              @wxcCityOnInput="cityInputChange"
              @wxcCityCanceled="cityCancel"></wxc-city>
    </div>
</template>
<script>
import propsync from '../../config/propsync'
import sourceData from './data';
import { WxcCity, WxcPopup, WxcGridSelect, WxcButton, WxcSearchbar } from 'weex-ui';

var amap = weex.requireModule('amap');
amap.initAmap('5442d6dc648cc739792f38c71db540c3');

import Category from '../common/category.vue';

export default {
    mixins: [propsync],//声明使用propsync的mixin
    props: ["fun"],
    components: { WxcCity, WxcPopup, WxcGridSelect, Category, WxcButton, WxcSearchbar },
    data: () => ({
    //   statusHeight: Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40),
      inputConfig: {
        autofocus: false,
        alwaysShowCancel: true,
        placeholder: '中文/拼音/首字母',
        showCancel: true
      },
      btnStyle2: {
        width: '300px',
        height: '70px',
        lineHeight: '60px'
      },
      customStyles: {
        lineSpacing: '10px',
        width: '125px',
        height: '50px',
        checkedBorderColor: '#ffb200',
      },
      customStyles2: {
        lineSpacing: '10px',
        width: '250px',
        height: '50px',
        checkedBorderColor: '#ffb200',
      },
      res1: '',
      res2: '',
      res3: '',
      areaData: [
        {
          'title': '获取中',
          'checked': true
        }
      ],
      timeData: [
        {
          'title': '全部时段',
          'value': '',
          'checked': true
        },
        {
          'title': '0:00-2:00',
          'value': '1'
        },
        {
            'title': '2:00-4:00',
            'value': '2'
        },
        {
            'title': '4:00-6:00',
            'value': '3',
        },
        {
            'title': '6:00-8:00',
            'value': '4',
        },
        {
          'title': '8:00-10:00',
          'value': '5'
        },
        {
            'title': '10:00-12:00',
            'value': '6'
        },
        {
            'title': '12:00-14:00',
            'value': '7',
        },
        {
            'title': '14:00-16:00',
            'value': '8',
        },
        {
            'title': '16:00-18:00',
            'value': '9',
        },
        {
            'title': '18:00-20:00',
            'value': '10',
        },
        {
            'title': '20:00-22:00',
            'value': '11',
        },
        {
            'title': '22:00-24:00',
            'value': '12',
        }
      ],
      currentCity: '',
      currentCounty: '',
      timeArea: '',
      currentWord: '搜索服务，拉近我们的距离',
      sourceData,
      cityStyleType:'list',
      location: '定位中',
      animationTypePush:'push', // 默认使用push方式，若使用push模式此参数可以不传
      animationTypeModel:'model',
      isRightShow: false,
      isTopShow: false,
      showCancel: true,
      cityTop: 40
    }),
    created() {
        //  vm.$notice.alert({
        //             message:1111
        //         })
        // this.cityTop = (weex.config.eros.statusBarHeight ? weex.config.eros.statusBarHeight : 40) + 'px';
        this.cityTop = Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40);
        console.log("test-----------------------" + this.cityTop);
        console.log("test--------------1112---------" + this.cityTop);
        const vm = this;

        // this.$geo.get().then(data => {
        //     console.log("::::::::::::::::::::::::::::::::::::1 ")
        //     console.log(data)
        // }, error => {
        //     console.log("::::::::::::::::::::::::::::::::::::2 ")
        //     console.log(error)
        // })
        // this.$notice.alert({
        //         title: '这是一个弹窗',
        //         message: 'test',
        //         okTitle: '确认',
        //         callback() {
        //             // 点击确认按钮的回调
        //         }
        //     })

        
        vm.$geo.get().then(data => {
            console.log(":::::::::::::::::::::::: Lng :" + data.locationLng)
            const lUrl = 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' + data.locationLng + ',' + data.locationLat + '&key=450bfc326ae7a1b49a2c82c3d716e2b9&radius=1000&extensions=all'
            this.$storage.setSync('locatData', data);
            // 示例
            vm.$fetch({
                method: 'GET',    // 大写
                // name: 'common.getInfo', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                url: lUrl,
                data: {
                    count: 1
                }
            }).then(resData => {

                // vm.$notice.alert({
                //     message:resData
                // })
                // 成功回调
                console.log(resData.regeocode.addressComponent.province);
                const addr = resData.regeocode.addressComponent.province;
                const city = resData.regeocode.addressComponent.city;
                console.log(typeof city);
                const ty = (typeof addr);
                console.log(ty);
                // const test = "新疆维吾尔自治区";
                const reg = /(市|省|自治区)$/g;

                if(typeof city == 'string'){
                    vm.location = city.replace(reg, "");
                } else {
                    vm.location = addr.replace(reg, "");
                }
                
                this.$storage.setSync('cityName', vm.location);

                vm.fun(vm.location, '', '', '');

                const ZUrl = 'https://restapi.amap.com/v3/config/district?keywords=' + this.location + '&subdistrict=2&key=450bfc326ae7a1b49a2c82c3d716e2b9';

                vm.$fetch({
                    method: 'GET',    // 大写
                    // name: 'common.getInfo', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    url: encodeURI(ZUrl),
                    data: {
                        count: 1
                    }
                }).then(resData => {
                    if(resData.districts.length > 1 ){
                        console.log(resData.districts[1].districts);
                        vm.areaData = [{
                            'title': '全部',
                            'value': '',
                            'checked': true
                        }];
                        const areaList = resData.districts[1].districts;
                        areaList.forEach( ( item, i ) => {
                            console.log( item, i );
                            let tmp = {};
                            // if(i == 0){
                            //     tmp = {"title": item.name, 'checked': true};
                            // } else {
                            //     tmp = {"title": item.name};
                            // }
                            tmp = {"title": item.name, 'value': item.name};
                            vm.areaData.push(tmp);
                        } );

                    } else if (this.location == "") {
                        // vm.areaData = [];
                        vm.areaData = [{
                            'title': '全部',
                            'value': '',
                            'checked': true
                        }];
                        const areaList = resData.districts[0].districts;
                        areaList.forEach( ( item, i ) => {
                            console.log( item, i );
                            let tmp = {};
                            // if(i == 0){
                            //     tmp = {"title": item.name, 'value': item.name, 'checked': true};
                            // } else {
                            //     tmp = {"title": item.name, 'value': item.name};
                            // }
                            tmp = {"title": item.name, 'value': item.name};
                            vm.areaData.push(tmp);
                        } );
                    }


                }, error => {
                    console.log("::::::::::::::::: 1")
                    // 错误回调
                    console.log(error)
                })

            }, error => {
                console.log(":::::::::::::::::2")
                // 错误回调
                console.log(error)
            })
        }, error => {
            console.log("::::::::::::::::: 3")
            console.log(error)
        })
        
        
    },
    methods: {
        jumpWeb(_url) {
            if (!_url) _url = 'http://m.you.163.com/search';
            this.$router.toWebView({
                url: _url,
                title: '',
                navShow: true,
            })
        },
        showGroupCityPush () {

            // this.$navigator.setNavigationInfo({
            //     title: '选择城市',                              // 中间区域标题    
            //     navShow: true,                          // 是否显示导航栏
            //     statusBarStyle: 'Default'               // 状态栏文字颜色：Defautl 黑色， LightContent 白色
            // }, () => {
            //     // 点击回调
            //     console.log("您点击了导航条中间区域。")
            // })

            
            this.cityStyleType = 'group'
            // 默认使用push方式，若使用push模式此参数可以不传
            this.animationTypePush = 'push'
            this.$refs['wxcCityPush'].show();
        },
        citySelect (e) {
            console.log(e);
            // this.$navigator.setNavigationInfo({
            //     title: '选择城市2',                              // 中间区域标题    
            //     navShow: false,                          // 是否显示导航栏
            //     statusBarStyle: 'Default'               // 状态栏文字颜色：Defautl 黑色， LightContent 白色
            // }, () => {
            //      // 点击回调
            //      console.log("您点击了导航条中间区域。")
            // })
            if(e.item.isLocation) {
                return;
            }

            this.currentCity = e.item;

            // this.$notice.alert({
            //     title: '这是一个弹窗',
            //     message: e.item,
            //     okTitle: '确认',
            //     callback() {
            //         // 点击确认按钮的address回调
            //     }
            // })
            
            this.location = e.item.cityName;
            this.$storage.setSync('cityName', this.location);
            this.fun(this.location, '', '', '');


            let SUrl = 'https://restapi.amap.com/v3/config/district?keywords=' + e.item.cityName + '&subdistrict=2&key=450bfc326ae7a1b49a2c82c3d716e2b9';

            this.$fetch({
                method: 'GET',    // 大写
                // name: 'common.getInfo', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                url: encodeURI(SUrl),
                data: {
                    count: 1
                }
            }).then(resData => {
                if(resData.districts.length > 1 ){
                    console.log(resData.districts[1].districts);
                    // this.areaData = [];
                    this.areaData = [{
                        'title': '全部',
                        'value': '',
                        'checked': true
                    }];
                    const areaList = resData.districts[1].districts;
                    areaList.forEach( ( item, i ) => {
                        console.log( item, i );
                        let tmp = {};
                        // if(i == 0){
                        //     tmp = {"title": item.name, 'value': item.name, 'checked': true};
                        // } else {
                        //     tmp = {"title": item.name, 'value': item.name};
                        // }
                        tmp = {"title": item.name, 'value': item.name};
                        this.areaData.push(tmp);
                    } );
                } else {

                    // this.areaData = [];
                    this.areaData = [{
                        'title': '全部',
                        'value': '',
                        'checked': true
                    }];
                    const areaList = resData.districts[0].districts;
                    areaList.forEach( ( item, i ) => {
                        console.log( item, i );
                        let tmp = {};
                        // if(i == 0){
                        //     tmp = {"title": item.name, 'value': item.name, 'checked': true};
                        // } else {
                        //     tmp = {"title": item.name, 'value': item.name};
                        // }
                        tmp = {"title": item.name, 'value': item.name};
                        this.areaData.push(tmp);
                    } );
                }
                

            }, error => {
                // 错误回调
                console.log(error)
                this.$notice.toast({ message: "定位失败, 请检查GPS"})
            })
            
            // this.$refs['wxcCityPush'].hide();
        },
        cityInputChange (e) {
            console.log(e);
            // this.$navigator.setNavigationInfo({
            //     title: '选择城市1',                              // 中间区域标题    
            //     navShow: false,                          // 是否显示导航栏
            //     statusBarStyle: 'Default'               // 状态栏文字颜色：Defautl 黑色， LightContent 白色
            // }, () => {
            //     // 点击回调
            //     console.log("您点击了导航条中间区域。")
            // })
        },
        cityCancel (e) {
            console.log("-------------Cancel-----");
        },
        buyCar () {
            this.$router.open({
                name: 'acw.buycar.buycar',
                type: 'PUSH',
                params: {sellType: ''}
            });
        },
        
    }
}
</script>
<style lang="sass" src="./wxcPopup.scss" scoped></style>
<style scoped>
.iconfont {
    font-family: iconfont;
}

.wrapper {
    height: 90px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-around;
    background-color: #fafafa;
    opacity: .99;
    padding-top: 20px;
}

.location {
    height: 70px;
    width: 100px;
    background-color: #666;
    /* line-height: 80px; */
}

.ltxt {
    text-align: center;
    color: #666;
    font-size: 30px;
    font-weight: 300;
    height: 70px;
    line-height: 60px;
    vertical-align: middle;
    background-color: aquamarine;
}

.scan,
.notice {
    height: 90px;
    width: 96px;
}

.ic,
.txt,
.search {
    text-align: center;
    color: #666;
    font-weight: 300;
}

.ic {
    font-size: 32px;
}

.txt {
    font-size: 18px;
}

.search {
    flex: 1;
    height: 60px;
    font-size: 26px;
    padding-top: 13px;
    background-color: #ededed;
    border-radius: 8px;
}
.timeDiv {
    height: 500px;
    left: 100px;
}
.bottomF {
    top: 28px;
    left: 75px;
}
</style>
